<template>
  <div class="cloud-service">
    <!-- search condition -->
    
    <Row class="">
      <Col :span="18">
        运营状态
         <Select v-model="select1" style="width:200px">
          <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
        </Select>
        &nbsp;&nbsp;&nbsp;
        使用场地
        <Input  placeholder="请输入场地名称" style="width: auto" >
          <!-- <span slot="append">查询</span> -->
        </Input>
        <Button type="primary">查询</Button>
            &nbsp;&nbsp;&nbsp;
        </Col>
        <Col :span="6" class="text-right">
        
        
      </Col>
    </Row>
    <!-- tables -->
    <div class="mt10">
      
        <Table stripe border :columns="columns1" :data="data1">
          <template slot-scope="{row,index}" slot="place">
            <span>地方地方</span>
             <Icon type="ios-create c5" size="24" title="编辑"  @click.native="editHandle(row)"/>
          </template>

           <template slot-scope="{row,index}" slot="desc">
            <span>描述啊</span>
             <Icon type="ios-create c5" size="24" title="编辑"  @click.native="editHandle(row)"/>
          </template>

           <template slot-scope="{row,index}" slot="status">
            <span class="c1" v-if="index==1">正常运行</span>
            <span class="c5" v-else-if="index==2">停止运行</span>
            <span class="c7" v-else>维修中</span>
          </template>

          <template slot-scope="{ row, index }" slot="action">
            <Icon type="ios-construct c4" size="20" title="报修" @click="repaire(row)"/>
            <Icon type="ios-headset c6" size="20" title="客服" @click="service(row)"/>
            <Icon type="ios-paper c1" size="20" title="详情" @click="gotoDetail(row)"/>
          </template>
        </Table>
    
    </div>
      
     <div class="page mt20">
       <Page :total="100" show-sizer show-total/>
     </div> 
     
     <!-- dialog -->
     <Modal v-model="modal1" width="700" title="报修">
       <div>
         <p>设备ID：GF3fdsfdsfdsfdsfxx323</p>
 
         <p class="mt20">报修内容：
            <Input type="textarea" placeholder="请输入保修内容" style="width:300px;"></Input>
         </p>
         <p class="mt20">保修时间：2019-09-08 16:33</p>
         <p class="mt20">联&nbsp;系&nbsp;人&nbsp;&nbsp;：<Input type="text" placeholder="请输入内容" style="width: 300px;"></Input></p>
         <p class="mt20">联系手机：<Input type="text" placeholder="请输入内容" style="width: 300px;"></Input></p>
       </div>
       <div slot="footer" class="text-center mt20" >
         <Button type="primary" size="large" @click="submit">提交</Button>
       </div>
     </Modal>
     
      <Modal v-model="modal2" width="700" title="客服">
       <table class="simple-table">
         <tr><th>使用场地</th><th>单位</th><th>客服电话</th></tr>
         <tr><td>代理商</td><td>江西xxxx有限公司</td><td>032323</td></tr>
         <tr><td>服务投诉</td><td>浙江xxxx有限公司</td><td>客服2332323电话</td></tr>
       </table>
       <div slot="footer" class="text-center">
       </div>
     </Modal>
  </div>
</template>

<script>
export default {
  mounted () {
    this.$store.commit('UPDATE_POSITION', this.position)
  },
  data (){
    return {
      select1: '1',
      modal1: false,
      modal2: false,
      inputValue: '',
      position:[
        {title: '云服务', link:'/admin/cloudService'},
        {title: '终端管理'}
      ],
      cityList: [
        {label: '正常运行', value: '1'},
        {label: '停止运行', value: '2'},        
        {label: '维修中', value: '3'},        
      ],
      columns1: [
        {title: '序号', key: 'id'},
        {title: '设备ID', key: 'address'},
        { title: '安装时间', key: 'address'},
        { title: '使用场地', slot: 'place'},
        { title: '描述', slot: 'desc'},
        { title: '运行状态', slot: 'status'},
        { title: '操作', slot: 'action', width: 160, align: 'center'},
       ],
       data1:[
         {
           id: '103232',
           'address': 'fsdfsdfdsf'
         },
         {
           id: '103232',
           'address': 'fsdfsdfdsf'
         },
         {
           id: '103232',
           'address': 'fsdfsdfdsf'
         },
         {
           id: '103232',
           'address': 'fsdfsdfdsf'
         },
         {
           id: '103232',
           'address': 'fsdfsdfdsf'
         },
         
       ]
    }
  },
  methods:{
    gotoDetail (item) {
      // this.$router.push(`buyDetail?id=${item.id}`)
    },
    repaire (item) {
      this.modal1 = true
    },
    service (item) {
      this.modal2 = true
    },
    submit(){
      
    },
    editHandle(row) {
        this.$Modal.confirm({
          title: '修改信息',
          render:(h) => {
            return h('Input', {
              props: {
                value: 'test',
                autoFocus: true,
              },
              on:{
                input: (val) => {
                  this.inputValue = val
                }
              }
            })
          },
          onOk: ()=> {
            this.$Message.success(`已修改`)
            // this.$Modal.remove()
          }
        })
      }
  }
}
</script>

<style lang="less" scoped>
  .simple-table{
    width: 100%;
    border-collapse: collapse;
    border:1px solid #f2f2f2;
    th{
      background: #f2f2f2;
      padding: 16px;
    }
    td{
      padding: 16px;
      border:1px solid #f2f2f2;
    }
  }
</style>
